Ekrāna orientācijas apgūšana: Visaptverošs ceļvedis ierīces rotācijas apstrādei

Mūsdienu daudzu ierīču pasaulē ir ļoti svarīgi prasmīgi pārvaldīt ekrāna orientāciju, lai nodrošinātu pozitīvu lietotāja pieredzi. Neatkarīgi no tā, vai tā ir viedtālrunis, planšetdators vai pat salokāma ierīce, lietotāji sagaida, ka lietotnes nevainojami pielāgosies, kad viņi pagriezīs savu ierīci. Šis ceļvedis sniedz visaptverošu pārskatu par ierīces rotācijas apstrādi, aptverot dažādas platformas un metodes, lai nodrošinātu, ka jūsu lietotnes ir adaptīvas un lietotājam draudzīgas.

Izpratne par ekrāna orientāciju

Ekrāna orientācija attiecas uz virzienu, kurā saturs tiek rādīts ierīces ekrānā. Divas galvenās orientācijas ir:

• Portreta (Portrait): Ekrāns ir augstāks nekā platāks. Šī ir tipiska viedtālruņu orientācija.
• Ainavas (Landscape): Ekrāns ir platāks nekā augstāks. To bieži izvēlas video skatīšanai vai spēļu spēlēšanai.

Dažas ierīces un lietotnes atbalsta arī:

• Apgrieztais portrets (Reverse Portrait): Portreta orientācija, ierīcei pagriežoties par 180 grādiem.
• Apgrieztā ainava (Reverse Landscape): Ainavas orientācija, ierīcei pagriežoties par 180 grādiem.

Kāpēc apstrādāt ekrāna orientācijas maiņas?

Neveiksmīga ekrāna orientācijas maiņu apstrāde var radīt dažādas problēmas, tostarp:

• Izkārtojuma problēmas: Elementi var būt nepareizi līdzināti, apgriezti vai pārklāties.
• Datu zudums: Dažos gadījumos, pagriežot ekrānu, var tikt zaudēts aktivitātes vai lietotnes stāvoklis.
• Slikta lietotāja pieredze: Strauja vai bojāta pieredze var kaitināt lietotājus un kaitēt jūsu lietotnes reputācijai.
• Veiktspējas problēmas: Bieža atkārtota renderēšana un izkārtojuma aprēķini var ietekmēt veiktspēju, īpaši vecākās ierīcēs.

Ekrāna orientācijas apstrāde dažādās platformās

Konkrētas metodes ekrāna orientācijas apstrādei atšķiras atkarībā no platformas, kurai jūs izstrādājat. Apskatīsim dažas no populārākajām platformām:

1. Android

Android nodrošina vairākus mehānismus ekrāna orientācijas maiņu apstrādei. Visbiežāk izmantotās pieejas ir:

a. Konfigurācijas izmaiņas

Pēc noklusējuma Android atjauno aktivitāti (Activity), kad mainās ekrāna orientācija. Tas nozīmē, ka `onCreate()` metode tiek izsaukta vēlreiz, un viss izkārtojums tiek atkārtoti ielādēts. Lai gan tas var būt noderīgi, lai pilnībā pārstrukturētu lietotāja saskarni, pamatojoties uz orientāciju, tas var būt arī neefektīvi, ja nepieciešams tikai nedaudz pielāgot izkārtojumu.

Lai novērstu aktivitātes atjaunošanu, jūs varat deklarēt, ka jūsu aktivitāte apstrādā `orientation` konfigurācijas maiņu `AndroidManifest.xml` failā:

<activity
 android:name=".MyActivity"
 android:configChanges="orientation|screenSize"
 ... >
</activity>

Pievienojot `orientation` un `screenSize` (svarīgi API līmenim 13 un augstākam), jūs paziņojat sistēmai, ka jūsu aktivitāte pati apstrādās orientācijas maiņas. Kad ekrāns pagriežas, tiks izsaukta `onConfigurationChanged()` metode.

@Override
public void onConfigurationChanged(Configuration newConfig) {
 super.onConfigurationChanged(newConfig);

 // Pārbaudiet ekrāna orientāciju
 if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
 Toast.makeText(this, "ainava", Toast.LENGTH_SHORT).show();
 } else if (newConfig.orientation == Configuration.ORIENTATION_PORTRAIT){
 Toast.makeText(this, "portrets", Toast.LENGTH_SHORT).show();
 }
}

Inside `onConfigurationChanged()`, jūs varat atjaunināt lietotāja saskarni, pamatojoties uz jauno orientāciju. Šī pieeja ir efektīvāka nekā aktivitātes atjaunošana, jo tā novērš nevajadzīgu resursu ielādi un izkārtojuma inflāciju.

b. Aktivitātes stāvokļa saglabāšana un atjaunošana

Pat ja jūs pats apstrādājat konfigurācijas maiņu, jums joprojām var būt nepieciešams saglabāt un atjaunot aktivitātes stāvokli. Piemēram, ja jūsu aktivitātē ir teksta lauks, jūs vēlēsities saglabāt tekstu, ko lietotājs ir ievadījis, kad ekrāns pagriežas.

Jūs varat izmantot `onSaveInstanceState()` metodi, lai saglabātu aktivitātes stāvokli, un `onRestoreInstanceState()` metodi, lai to atjaunotu.

@Override
public void onSaveInstanceState(Bundle savedInstanceState) {
 savedInstanceState.putString("my_text", myTextView.getText().toString());
 super.onSaveInstanceState(savedInstanceState);
}

@Override
public void onRestoreInstanceState(Bundle savedInstanceState) {
 super.onRestoreInstanceState(savedInstanceState);
 String myText = savedInstanceState.getString("my_text");
 myTextView.setText(myText);
}

Alternatīvi, jūs varat izmantot ViewModels ar SavedStateHandle, lai pārvaldītu un saglabātu ar lietotāja saskarni saistītus datus konfigurācijas maiņu laikā, kas ir modernāka un ieteicamāka pieeja.

c. Alternatīvi izkārtojumi

Android ļauj nodrošināt dažādus izkārtojuma failus dažādām ekrāna orientācijām. Jūs varat izveidot atsevišķus izkārtojuma failus `res/layout-land/` un `res/layout-port/` direktorijās. Kad ekrāns pagriežas, Android automātiski ielādēs atbilstošo izkārtojuma failu.

Šī pieeja ir noderīga, ja lietotāja saskarnei ir jābūt būtiski atšķirīgai ainavas un portreta orientācijās. Piemēram, jūs varētu vēlēties parādīt divu paneļu izkārtojumu ainavas režīmā un viena paneļa izkārtojumu portreta režīmā.

d. ConstraintLayout izmantošana

ConstraintLayout ir spēcīgs izkārtojuma pārvaldnieks, kas ļauj izveidot elastīgus un adaptīvus izkārtojumus. Ar ConstraintLayout jūs varat definēt ierobežojumus, kas nosaka, kā skatiem jābūt novietotiem attiecībā pret otru un pret vecāka izkārtojumu. Tas atvieglo tādu izkārtojumu izveidi, kas pielāgojas dažādiem ekrāna izmēriem un orientācijām.

2. iOS

iOS arī nodrošina mehānismus ekrāna orientācijas maiņu apstrādei. Šeit ir dažas izplatītas pieejas:

a. Auto Layout

Auto Layout ir uz ierobežojumiem balstīta izkārtojuma sistēma, kas ļauj definēt noteikumus par to, kā skatiem jābūt pozicionētiem un izmērētiem. Auto Layout ierobežojumi nodrošina, ka jūsu lietotāja saskarne pielāgojas dažādiem ekrāna izmēriem un orientācijām.

Izmantojot Auto Layout, jūs parasti definējat ierobežojumus, kas norāda attiecības starp skatiem. Piemēram, jūs varētu ierobežot pogu, lai tā būtu centrēta horizontāli un vertikāli tās vecāka skatā. Kad ekrāns pagriežas, Auto Layout dzinējs automātiski pārrēķina skatu pozīcijas un izmērus, lai apmierinātu ierobežojumus.

b. Izmēru klases (Size Classes)

Izmēru klases ir veids, kā kategorizēt ekrāna izmērus un orientācijas. iOS definē divas izmēru klases: `Compact` un `Regular`. Ierīcei var būt dažādas izmēru klases platumam un augstumam. Piemēram, iPhone portreta orientācijā ir `Compact` platuma izmēru klase un `Regular` augstuma izmēru klase. Ainavas režīmā tam bieži ir `Compact` augstums un `Compact` vai `Regular` platums atkarībā no modeļa.

Jūs varat izmantot izmēru klases, lai pielāgotu savu lietotāja saskarni, pamatojoties uz ekrāna izmēru un orientāciju. Piemēram, jūs varētu vēlēties parādīt atšķirīgu skatu kopu vai izmantot dažādus fontus dažādām izmēru klasēm.

Jūs varat konfigurēt dažādus ierobežojumus un pat instalēt/atinstalēt skatus, pamatojoties uz izmēru klasēm tieši Interface Builder vai programmatiski.

c. Skata kontroliera (View Controller) rotācijas metodes

iOS nodrošina vairākas metodes UIViewController klasē, kuras tiek izsauktas, kad ierīce pagriežas:

• viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator): Tiek izsaukta, pirms skata kontroliera skats tiek mainīts pārejai.
• viewWillLayoutSubviews(): Tiek izsaukta tieši pirms skata kontroliera skats izkārto savus apakšskatus.
• viewDidLayoutSubviews(): Tiek izsaukta tieši pēc tam, kad skata kontroliera skats ir izkārtojis savus apakšskatus.

Jūs varat pārrakstīt šīs metodes, lai veiktu pielāgotus izkārtojuma pielāgojumus, kad ekrāns pagriežas.

d. Paziņojumu centrs (Notification Center)

Jūs varat klausīties orientācijas maiņas paziņojumus, izmantojot Paziņojumu centru:

NotificationCenter.default.addObserver(self, selector: #selector(orientationChanged), name: UIDevice.orientationDidChangeNotification, object: nil)

@objc func orientationChanged() {
 if UIDevice.current.orientation.isLandscape {
 print("Ainava")
 } else {
 print("Portrets")
 }
}

3. Tīmekļa izstrāde (HTML, CSS, JavaScript)

Tīmekļa izstrādē jūs varat izmantot CSS mediju vaicājumus un JavaScript, lai apstrādātu ekrāna orientācijas maiņas.

a. CSS mediju vaicājumi

Mediju vaicājumi ļauj piemērot dažādus stilus, pamatojoties uz ekrāna izmēru, orientāciju un citām īpašībām. Jūs varat izmantot `orientation` medija funkciju, lai mērķētu uz konkrētām orientācijām.

/* Portreta orientācija */
@media (orientation: portrait) {
 body {
 background-color: lightblue;
 }
}

/* Ainavas orientācija */
@media (orientation: landscape) {
 body {
 background-color: lightgreen;
 }
}

Jūs varat izmantot mediju vaicājumus, lai pielāgotu izkārtojumu, fontus un citus stilus, pamatojoties uz orientāciju.

b. JavaScript

Jūs varat izmantot JavaScript, lai noteiktu ekrāna orientācijas maiņas un veiktu pielāgotas darbības. `screen.orientation` API sniedz informāciju par pašreizējo orientāciju.

function handleOrientationChange() {
 if (screen.orientation.type === "landscape-primary" || screen.orientation.type === "landscape-secondary") {
 console.log("Ainava");
 } else if (screen.orientation.type === "portrait-primary" || screen.orientation.type === "portrait-secondary") {
 console.log("Portrets");
 } else {
 console.log("Nezināma orientācija");
 }
}

window.addEventListener("orientationchange", handleOrientationChange);

Alternatīvi, jūs varat izmantot `matchMedia` API ar mediju vaicājumiem:

const landscapeMediaQuery = window.matchMedia("(orientation: landscape)");

function handleOrientationChange(event) {
 if (event.matches) {
 console.log("Ainava");
 } else {
 console.log("Portrets");
 }
}

landscapeMediaQuery.addEventListener("change", handleOrientationChange);

JavaScript var izmantot, lai dinamiski pielāgotu izkārtojumu, ielādētu dažādus resursus vai veiktu citas darbības, pamatojoties uz orientāciju.

c. Adaptīvā dizaina ietvari

Tādi ietvari kā Bootstrap, Foundation un Materialize CSS nodrošina iebūvētu atbalstu adaptīvajam dizainam, atvieglojot tādu izkārtojumu izveidi, kas pielāgojas dažādiem ekrāna izmēriem un orientācijām. Šie ietvari parasti izmanto režģa sistēmu un mediju vaicājumus, lai izveidotu elastīgas un adaptīvas lietotāja saskarnes.

Labākā prakse ekrāna orientācijas apstrādē

Šeit ir dažas labākās prakses, kas jāpatur prātā, apstrādājot ekrāna orientācijas maiņas:

• Izvairieties no nevajadzīgas Activity/ViewController atjaunošanas: Ja iespējams, apstrādājiet konfigurācijas maiņu paši, lai izvairītos no liekām izmaksām, kas saistītas ar Activity vai ViewController atjaunošanu.
• Saglabājiet un atjaunojiet stāvokli: Vienmēr saglabājiet un atjaunojiet Activity/ViewController stāvokli, lai novērstu datu zudumu. Izmantojiet ViewModels stabilākai stāvokļa pārvaldībai.
• Izmantojiet Auto Layout vai ConstraintLayout: Šīs izkārtojuma sistēmas atvieglo elastīgu un adaptīvu izkārtojumu izveidi.
• Testējiet uz vairākām ierīcēm: Pārbaudiet savu lietotni uz dažādām ierīcēm ar dažādiem ekrāna izmēriem un orientācijām, lai nodrošinātu, ka tā darbojas pareizi.
• Apsveriet pieejamību: Nodrošiniet, ka jūsu lietotne paliek pieejama lietotājiem ar invaliditāti, kad ekrāns pagriežas.
• Nodrošiniet skaidrus vizuālus norādījumus: Ja lietotāja saskarne būtiski mainās, kad ekrāns pagriežas, nodrošiniet skaidrus vizuālus norādījumus, lai palīdzētu lietotājiem saprast izmaiņas.
• Izvairieties no piespiedu orientācijas (ja vien tas nav nepieciešams): Ļaujiet lietotājiem izmantot savu ierīci viņu vēlamajā orientācijā, kad vien tas ir iespējams. Piespiedu orientācija var būt kaitinoša un neērta. Bloķējiet orientāciju tikai tad, ja tas ir būtiski lietotnes funkcionalitātei (piemēram, spēle, kas prasa ainavas režīmu). Ja bloķējat orientāciju, skaidri paziņojiet lietotājam iemeslu.
• Optimizējiet veiktspēju: Samaziniet darba apjomu, kas jāveic, kad ekrāns pagriežas, lai izvairītos no veiktspējas problēmām.
• Izmantojiet relatīvās mērvienības: Definējot izmērus un pozīcijas savā izkārtojumā, izmantojiet relatīvās mērvienības (piemēram, procentus, `dp`, `sp`) absolūto mērvienību (piemēram, pikseļu) vietā, lai nodrošinātu, ka jūsu lietotāja saskarne pareizi mērogojas dažādos ekrāna izmēros.
• Izmantojiet esošās bibliotēkas un ietvarus: Izmantojiet esošo bibliotēku un ietvaru priekšrocības, kas nodrošina atbalstu adaptīvajam dizainam un ekrāna orientācijas apstrādei.

Orientācijas bloķēšana un lietotāja pieredze

Lai gan parasti ir vislabāk ļaut lietotājiem brīvi pagriezt savas ierīces, ir situācijas, kad jūs varētu vēlēties bloķēt ekrāna orientāciju. Piemēram, pilnekrāna video atskaņotājs varētu bloķēt orientāciju ainavas režīmā optimālai skatīšanai.

Tomēr ir svarīgi izmantot orientācijas bloķēšanu taupīgi un sniegt lietotājam skaidru iemeslu. Piespiedu orientācija var būt kaitinoša un var padarīt jūsu lietotni mazāk pieejamu.

Kā bloķēt ekrāna orientāciju

Android

Jūs varat bloķēt ekrāna orientāciju Android, iestatot `screenOrientation` atribūtu `AndroidManifest.xml` failā:

<activity
 android:name=".MyActivity"
 android:screenOrientation="landscape"
 ... >
</activity>

Jūs varat arī bloķēt orientāciju programmatiski:

setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);

iOS

iOS platformā jūs varat norādīt atbalstītās orientācijas `Info.plist` failā. Jūs varat arī pārrakstīt `supportedInterfaceOrientations` metodi savā skata kontrolierī:

override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
 return .landscape
}

Globāli apsvērumi

Izstrādājot globālai auditorijai, paturiet prātā šādus aspektus attiecībā uz ekrāna orientāciju:

• No labās uz kreiso (RTL) izkārtojumi: Apsveriet, kā jūsu lietotāja saskarne pielāgosies RTL valodām. Dažas valodas, piemēram, arābu un ebreju, tiek rakstītas no labās uz kreiso. Pārliecinieties, ka jūsu izkārtojums pareizi atspoguļojas RTL režīmā. Auto Layout un ConstraintLayout bieži nodrošina iebūvētu atbalstu RTL izkārtojumiem.
• Kultūras preferences: Esiet uzmanīgi pret kultūras preferencēm, kas saistītas ar ierīču lietošanu. Lai gan lielākā daļa lietotāju ir pieraduši gan pie portreta, gan ainavas režīmiem, dažām kultūrām var būt smalkas preferences. Testēšana ar lietotājiem no dažādiem reģioniem var sniegt vērtīgas atziņas.
• Pieejamība dažādiem lietotājiem: Vienmēr prioritizējiet pieejamību. Nodrošiniet, ka jūsu lietotne ir lietojama cilvēkiem ar invaliditāti neatkarīgi no ekrāna orientācijas. Tas ietver alternatīva teksta nodrošināšanu attēliem, pietiekama krāsu kontrasta nodrošināšanu un palīgtehnoloģiju atbalstīšanu.

Ekrāna orientācijas apstrādes testēšana

Rūpīga testēšana ir būtiska, lai nodrošinātu, ka jūsu lietotne pareizi apstrādā ekrāna orientācijas maiņas. Šeit ir daži padomi testēšanai:

• Izmantojiet emulatorus un reālas ierīces: Pārbaudiet savu lietotni gan emulatoros, gan reālās ierīcēs, lai aptvertu plašāku ekrāna izmēru un aparatūras konfigurāciju klāstu.
• Testējiet dažādās orientācijās: Pārbaudiet savu lietotni gan portreta, gan ainavas orientācijās, kā arī apgrieztā portreta un apgrieztā ainavas orientācijā, ja tās tiek atbalstītas.
• Testējiet ar dažādiem ekrāna izmēriem: Pārbaudiet savu lietotni uz ierīcēm ar dažādiem ekrāna izmēriem, lai nodrošinātu, ka lietotāja saskarne pareizi mērogojas.
• Testējiet ar dažādiem fontu izmēriem: Pārbaudiet savu lietotni ar dažādiem fontu izmēriem, lai nodrošinātu, ka teksts paliek salasāms.
• Testējiet ar iespējotiem pieejamības līdzekļiem: Pārbaudiet savu lietotni ar iespējotiem pieejamības līdzekļiem, piemēram, ekrāna lasītājiem, lai nodrošinātu, ka tā paliek pieejama lietotājiem ar invaliditāti.
• Automatizētā testēšana: Ieviesiet automatizētus lietotāja saskarnes testus, kas aptver ekrāna orientācijas maiņas. Tas var palīdzēt atklāt regresijas un nodrošināt konsekventu uzvedību starp laidieniem.

Noslēgums

Efektīva ekrāna orientācijas apstrāde ir kritisks mobilo un tīmekļa izstrādes aspekts. Izprotot dažādās metodes, kas pieejamas katrā platformā, un ievērojot labāko praksi, jūs varat izveidot lietotnes, kas nodrošina nevainojamu un patīkamu lietotāja pieredzi neatkarīgi no tā, kā lietotājs tur savu ierīci. Atcerieties prioritizēt testēšanu un apsvērt savu dizaina izvēļu globālās sekas, lai nodrošinātu, ka jūsu lietotne ir pieejama un lietotājam draudzīga daudzveidīgai auditorijai.